<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="./css/all.css">
<link rel="stylesheet" type="text/css" href="./css/design.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/ajax/ajaxFeng.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</head>
<body>
	 <div class="all">
         <div class="show">
            <div class="show_zhuan"><img src="http://file.zoomyoung.cn/web/img/zhuan.png"/></div>
            <a class="show_next" >下一步</a>
            <div class="zhuan">
                <img  class="rr" color_space="ffffff"/>
                <img class="show_cloth_content" style="display: none" />
            </div>
            <div class="showColor">
                  <img src="http://file.zoomyoung.cn/web/img/material/small/showBtn.png"/>
            </div>
            <div class="selectColor">
                <ul></ul>
            </div>
         </div>
         <div class="footer">
            <div class="footr_nav">
               <ul>
                  <li class="select">
                      <img src="http://file.zoomyoung.cn/web/img/Chinese.png" class="Chinese"/>
                      <img src="http://file.zoomyoung.cn/web/img/Chinese1.png" class="Chinese1"/>
                  </li>
                  <li>
                      <img src="http://file.zoomyoung.cn/web/img/English.png" class="English"/>
                      <img src="http://file.zoomyoung.cn/web/img/English1.png" class="English1"/>
                  </li>
                  <li>
                      <img src="http://file.zoomyoung.cn/web/img/picture.png" class="Picture"/>
                      <img src="http://file.zoomyoung.cn/web/img/picture1.png" class="Picture1"/>
                  </li>
               </ul>
            </div>
            <div class="footer_footer wiper-container">
              <div class="swiper-wrapper">
                 
              </div>
            </div>
         </div>
	 </div>



<!--jq代码-->
	 <script type="text/javascript">
   /*初始化footer高度*/
   var footerWidth=$(document).width()/1.5  +"px";
   $('.footer').css('height',footerWidth);
   $('.selectColor').css('bottom',footerWidth)
   $('.showColor').css('bottom',footerWidth)
	 /*切换底部导航条*/
       $('.footr_nav ul li').click(function(){
        var index=$(this).index();
        if(index==0)
        {
          type="zh"
        }
        if(index==1)
        {
           type="en"
        }
        else
        {
          type="img"
        }
        //fen(dataAjax("http://zoomyoung.cn/api/design/get-material","get","json",false,type));
       	$(this).addClass('select').siblings().removeClass('select');
        $(this).find('img').eq(1).show();
        $(this).find('img').eq(0).hide();
        var len=$(this).siblings().length;
        for(var i=0;i<len;i++)
        {
        	$(this).siblings().eq(i).find('img').eq(1).hide();
          $(this).siblings().eq(i).find('img').eq(0).show();
        }
       })
   <!--中文功能-->
      var img=index_footer("?type=zh");
      function index_footer(dataString){
       return $.doGetDataAjax("http://zoomyoung.cn/api/design/get-material","json",false,dataString);
      }
      fen(img)
     <!--让图片分页-->
     function fen(img){
        $('.footer_footer .swiper-wrapper').empty();
       var hengNum=Math.ceil(img.data.heng.length/6);
       if(img.data.heng.length>0)
       {
         for(var i=0;i<hengNum;i++)
       {
         $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');
         for(var j=0;j<img.data.heng.length-6*i;j+=2)
         {
          $('.footer_footer .swiper-wrapper ul').eq(i).append('<li><div><img src="'+img.data.heng[j+6*i].img_thumb_url+'" img_url="'+img.data.heng[j+6*i].img_url+'" img_id="'+img.data.heng[j+6*i].img_id+'"/></div><div><img src="'+img.data.heng[j+6*i+1].img_thumb_url+'" img_url="'+img.data.heng[j+6*i+1].img_url+'" img_id="'+img.data.heng[j+6*i+1].img_id+'"/></div></li>')
         }
        };
       }
       if(img.data.shu.length>0)
       {
        var ulLen=$('.footer_footer .swiper-wrapper ul:last').children().length;
        if(ulLen!=3)
        {  
          for(var i=0;i<3-ulLen;i++)
          {
            $('.footer_footer .swiper-wrapper ul:last').append('<li class="shu"><img src="'+img.data.shu[i].img_thumb_url+'" img_url="'+img.data.shu[i].img_url+'" img_id="'+img.data.shu[i].img_id+'"/></li>')
          }
           var shuNum=Math.ceil((img.data.shu.length-ulLen)/3);
          for(var i=0;i<shuNum;i++)
          {
            $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');
          for(var j=0;j<img.data.shu.length-3*i;j++)
          {
            $('.footer_footer .swiper-wrapper ul').eq(hengNum+i).append('<li class="shu"><img src="'+img.data.shu[j].img_thumb_url+'" img_url="'+img.data.shu[j].img_url+'" img_id="'+img.data.shu[j].img_id+'"/>')
          }
          }
        }else
        {  var shuNum=Math.ceil(img.data.shu.length/3);
          for(var i=0;i<shuNum;i++)
          {
            $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');
          for(var j=0;j<img.data.shu.length-3*i;j++)
          {
            $('.footer_footer .swiper-wrapper ul').eq(hengNum+i).append('<li class="shu"><img src="'+img.data.shu[i].img_thumb_url+'" img_url="'+img.data.shu[i].img_url+'" img_id="'+img.data.shu[i].img_id+'"/>')
          }
          }
        }
       }
     }
       
      <!--滑动-->
      var mySwiper = new Swiper ('.footer_footer', {
        direction: 'horizontal',
        //loop: true,
        // 如果需要分页器
        pagination: {
        el: '.swiper-pagination',
        },
        roundLengths : true
      });  

<!--点击图片显示在大框上-->
$('.footer_footer ul img').eq(0).addClass('select');
       $('.footer_footer ul  img').click(function(){
        $('.show_cloth_content').show()
        $('.show_cloth_content').attr("style","");
        $('.show_cloth_content').show();
       	   for(var i=0;i<$('.footer_footer ul img').length;i++)
       	   {
              if($('.rr').attr('face')==0)
             {
              zhengmian.type=0
              zhengmian.img_id=$(this).attr('img_id')
             }
             else
             {
              fanmian.type=1
              fanmian.img_id=$(this).attr('img_id');
             }
             $('.footer_footer ul img').removeClass('select');
       	   }
       	   $(this).addClass('select');

        /*选中衣服的背景*/
       	   var imgsrc=$(this).attr('img_url');
           var imgid=$(this).attr('img_id');
       	  $('.show_cloth_content').attr('src',imgsrc)
          $('.show_cloth_content').attr('img_id',imgid)
       })
      $('.footer_footer ul').find("li").eq(0).find('div').eq(0).find('img').click(function(){
          $('.show_cloth_content').hide();
      })

var zhengmian={
   type:'0' ,    //正面:0  反面:1
   cloth_color:'ffffff',
   img_id:'',
   gid:'1',
   cloth_src:'http://file.zoomyoung.cn/main/2018/6/9/9b254b6cbb190b9c4d419f223ad56563.png?t=1.6841430743557484',
   img_src:''

}
var fanmian={
   type:'1' ,    //正面:0  反面:1
   cloth_color:'ffffff',
   img_id:'',
   gid:'1',
   cloth_src:'http://file.zoomyoung.cn/main/2018/6/9/9b254b6cbb190b9c4d419f223ad56563.png?t=1.6841430743557484',
   img_src:''
}
var chuan={
  gid:'',
  face:'',
  color:'ffffff'
}
           <!--设置展示图片的位置-->
           <!--获取屏幕的大小-->
          var $msg='?gid=1&&color=ffffff&&face=0';
          var msg=$.doGetDataAjax('http://zoomyoung.cn/api/design/get-template',"json",false,$msg);
          var msg_src=msg.data.img_url+'?t='+Math.random()*10;
          $('.rr').attr("src",msg_src)
          var img = new Image();
          img.src = $('.rr').attr("src");
          img.onload = function(){
          var screnTop=$(document).height();
          <!--获取展示图片盒子的大小-->
          var boxTop=$('.rr').height();
          var footeTop=$('.footer').height();
          var liTop=(screnTop-footeTop-boxTop)/2+'px';
          $('.zhuan').css({"top":liTop})
          <!--设置下一步按钮的行高-->
          $('.show_next').css({'line-height':$('.show_next').css('height')});
          $('.show_cloth_content').attr('src',zhengmian.tuan_url);
          $('.rr').attr('face',zhengmian.type)
           }
          
var tag=0;     //0:转反面  1:转正面
<!--点击按钮，旋转衣服正反面-->
var tag=1;   //0正面   1反面
$('.show_zhuan').click(function(){
     tag++;
     if(tag>1)
     {
      tag=0
     }
     qiehuan(tag)
  });
var t=$('.show_cloth_content')
var rr=$('.rr')
  function qiehuan(tag){
      if(tag==0){
            chuan.gid= '1';     //商品类型
            chuan.face='1';
            var $a = "?gid="+chuan.gid+"&&face="+chuan.face+"&&color="+chuan.color
            var data=$.doGetDataAjax('http://zoomyoung.cn/api/design/get-template',"json",false,$a);
            fanmian.cloth_src=data.data.img_url;
            rr.attr('face','1')
            zhengmian.cloth_color=rr.attr('color_space');
            zhengmian.img_src=t.attr('src');
            if(fanmian.img_src==undefined || fanmian.img_src==="")  
            {
            t.attr('src',"")
            t.hide();
            }
            else
            {
            t.show();
            t.attr('src',fanmian.img_src);
            }
            }
        else
        {
          chuan.gid= '1';     //商品类型
            chuan.face='0';
            var $a = "?gid="+chuan.gid+"&&face="+chuan.face+"&&color="+chuan.color
            var data=$.doGetDataAjax('http://zoomyoung.cn/api/design/get-template',"json",false,$a);
            zhengmian.cloth_src=data.data.img_url;
            fanmian.cloth_color=rr.attr('color_space');
            fanmian.img_src=t.attr('src');
            rr.attr('face','0')
            if(zhengmian.img_src==undefined || zhengmian.img_src=="")
            {
            t.attr('src',"")
            t.hide();
            }
            else
            {
            t.show();
            t.attr('src',zhengmian.img_src);
            }
        }
     rotateY(zhengmian.cloth_src,fanmian.cloth_src);
  }

  <!--正反面切换-->     
   var y,ny=0,rotYINT
      function rotateY(zheng,fan)
      {
      clearInterval(rotYINT)
      rotYINT=setInterval("startYRotate('"+zheng+"','"+fan+"')",30);
      }
      function startYRotate(zheng,fan)
      {
      ny=ny+5;
      rr.css("transform","rotateY(" + ny + "deg)");
      t.css("transform","rotateY(" + ny + "deg)");
      if (ny==90) {
        rr.attr('src',fan) 
      }
      if (ny==270) {
        rr.attr('src',zheng)
      }
      if (ny==180 || ny>=360)
        {
    $('.show_cloth_content').css("transform","rotateY(0deg)");
        clearInterval(rotYINT)
        if (ny>=360){
          ny=0;
        }
        }
      }

      /*点击下一步 页面跳转*/
    $('.show_next').click(function(){
      if(zhengmian.img_id=="")
      {
        zhengmian.img_id=0;
      }
      if(fanmian.img_id=="")
      {
        fanmian.img_id=0;
      }
        console.log(zhengmian.type);
        console.log(zhengmian.img_id);
        console.log(fanmian.type)
        console.log(fanmian.img_id)
        console.log(chuan.color)
    })
         
         /*刚加载时获取衣服颜色的小图案*/
          smallCloth($('.selectColor ul'))
         function smallCloth(dom){
           var dom=dom;
            var data= $.doGetDataAjax('http://zoomyoung.cn/api/design/get-color-list',"json",false,"");
               if(data.level!="success")
               {
                console.log(data.message);
               }
            for(var i=0;i<data.data.length;i++)
            {
               dom.append(" <li><img src='"+data.data[i].color_img_url+"' color_space='"+data.data[i].color_space+"'/></li>");
            }
            dom.append('<li class="colorSet"><img src="img/cloth/small/setBtn.png"/></li>  ')
         }
       
                 /*替换衣服颜色*/
                 var selectColorLi=$('.selectColor ul li')
                 selectColorLi.click(function(){
                    chuan.gid= '1';     //商品类型
                    chuan.face=$('.rr').attr('face');
                    chuan.color=$(this).find('img').attr('color_space');
                    $a = "?gid="+chuan.gid+"&&face="+chuan.face+"&&color="+chuan.color
                   var data=$.doGetDataAjax('http://zoomyoung.cn/api/design/get-template',"json",false,$a);
                   $('.rr').attr('src',data.data.img_url);
                   $('.rr').attr('color_space',data.data.color_space);
                   if(chuan.face==0)
                   {
                    zhengmian.cloth_src=data.data.img_url;
                    zhengmian.cloth_color=data.data.color_space
                    console.log(zhengmian)
                   }
                   else
                   {
                    fanmian.cloth_src=data.data.img_url;
                    fanmian.cloth_color=data.data.color_space
                    console.log(fanmian)
                   }
                    
         });
         /*取消点击按钮的点击事件*/
             $('.selectColor ul li:last').off('click')
         /*绑定点击按钮的点击事件*/
              var selectColor=$('.selectColor')
              function hideColor(){
                     selectColor.animate({'height':'0'},function(){
                     selectColor.hide();
                   })
              }
              function showColor(){
                    selectColor.show();
                    var height1=0;
                    for(var i=0;i<selectColorLi.length;i++)
                    {
                      height1+=selectColorLi.eq(i).height();
                    }
                    var height=height1+20+"px"
                    selectColor.animate({'height':height})
              } 
              $('.show_zhuan').click(function(){
                 hideColor()
              })
               $('.zhuan').click(function(){
                 hideColor()
              })
                $('.footer').click(function(){
                 hideColor()
              })
                $('.colorSet').click(function(){
                 hideColor()
              })
              $('.showColor').click(function(){ 
                  showColor();
                  return false
              }) 
     </script>
</body>
</html>